<script lang="tsx">
import { get, post, message, loadFile, formatEnum } from '@/utils'
import useRender from '@/views/visualEditor/useRender'
import CDrawer from '@/components/common/Drawer.vue'
import { FormInstance, Form, Modal } from '@arco-design/web-vue'
import cloneDeep from 'lodash/cloneDeep'
import useConfig from '../useConfig'
import configRender from '@/sysConfig'
const { renderPropsItem } = useRender()
export default defineComponent({
  emit: ['update:show', 'confirm'],
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
    },
    id: {
      required: true,
    },
    width: {
      default: '1000px',
    },
  },
  setup(props, { emit }) {
    const formRef = ref() as Ref<FormInstance>
    const { formatRenderList, formatResquestRenderList, formatCustom } = useConfig()
    const detail = reactive({
      configKey: '',
      configName: '',
      id: '',
      configValue: {},
      configExt: [] as DiyConfigOptions[],
    })
    const submit = done => {
      /**处理自定义组件 */
      const renderOption = formatCustom(cloneDeep(detail.configExt))
      const query = {
        id: props.id,
        configKey: detail.configKey || 'wx.pay',
        configValue: JSON.stringify(detail.configValue),
        // configExt: formatRenderList(renderOption),
      }
      console.log(detail.configValue)
      console.log(query)

      // done(false)
      // return
      formRef.value.validate(err => {
        if (!err) {
          post(
            { url: '/server-system/admin/config/submit', data: query },
            ({ code, msg }) => {
              message({
                type: code == 200 ? 'success' : 'error',
                content: msg,
              })
              emit('update:show', false)
              emit('confirm')
              done(true)
            },
            () => done(false)
          )
        } else done(false)
      })
    }

    const getInfo = () => {
      // return
      get({ url: '/server-system/admin/config/info', data: { id: props.id } }, ({ data }) => {
        detail.configKey = data.configKey
        detail.configValue = JSON.parse(data.configValue)
        const renderOption = formatResquestRenderList(configRender[data.configKey])
        detail.configExt = formatCustom(renderOption, true)
        detail.configName = data.configName
      }) || []
    }

    watch(
      () => detail.configValue,
      newVal => {
        detail.configExt.map(v => {
          v.defaultValue = newVal[v.valueKey as string]
        })
      },
      {
        deep: true,
      }
    )
    onMounted(() => {
      if (props.id) getInfo()
    })

    return () => (
      <CDrawer visible={props.show} width={props.width} onUpdate:visible={val => emit('update:show', val)} onBeforeOk={done => submit(done)} mask-closable={false} title={'编辑-' + detail.configName} onCancel={() => emit('update:show', false)}>
        <div class="content">
          <Form model={detail.configValue} ref={formRef} label-align="left" label-col-props={{ span: 5 }} wrapper-col-props={{ span: 19 }}>
            {detail?.configExt?.map(props => renderPropsItem(props, detail.configValue))}
          </Form>
        </div>
      </CDrawer>
    )
  },
})
</script>
<style lang="less" scoped>
.content {
  :deep(.drag-item) {
    border: 1px solid #eee;
    padding: 10px 5px;
    margin-bottom: 5px;
    box-shadow: 0 0 10px #eee;
    .arco-form-item {
      margin-bottom: 0px;
    }
  }
}
</style>
